<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="referrer" content="never">
    <title>掘金</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 18px;
        }
        .nav{
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #eeeeee;
        }
        .nav-bar{
            width: 1230px;
            height: 76px;
            display: flex;
            justify-content: space-between;
        }

        .nav-bar-left{
            display: flex;
        }
        .nav-bar-left span {
            height: 76px;
            line-height: 76px;
            display: flex;
            justify-items: center;
            color: rgb(0,108,255);
        }

        .nar-bar-left img{
            width: 120px;
            height: 45px;
        }

        .nav-bar-left ul{
            width: 400px;
            height: 76px;
            display: flex;
            flex: 1;
            justify-items: center;
            margin-top: 0;

        }

        .nav-bar-left ul li{
            height: 76px;
            margin-left: 40px;
            line-height: 76px;
            list-style: none;
            font-size: 20px;
        }
        .nav-bar-left ul li:hover {
            color: rgb(0,108,255);
        }


        .nav-bar-right{
            height: 76px;
            width: 460px;
            line-height: 76px;
        }

        input[type=text]{
            width: 196px;
            height: 39px;
            border-radius: 4px;
            border: 1px solid #eeeeee;
        }

        .nav-bar-right span{
            margin-left:10px;
            color: rgb(0,108,255);

        }
        .nav-bar-right span:first-child {
            margin-left: 40px;
        }

        main {
            width: 1230px;
            min-height: 600px;
            margin:0 auto;
        }

        main .context {
            display: flex;
            text-align: left;
            flex-wrap: wrap;
            padding-left: 0;
        }

        main .context .topic-card{
            width: 280px;
            height: 90px;
        }
        main header {
            height: 140px;
            line-height: 140px;

        }
         h1 {
            margin: 50px 10px;
        }
        .topic-card {
            width: 370px;
            height: 99px;
            margin: 43px 40px;
            display: flex;


        }
        .topic-card-left {
            width: 92px;
            height: 92px;
        }

        .topic-card-left img {
            width: 100%;
            height: 100%;
            border-radius: 10px;

        }
        .topic-card-right {
            margin-left: 20px;
            line-height: 10px;

            flex: 1;
        }

        .topic-card-right h3 {
            margin-top: 5px;
        }


    </style>
</head>
<body>
<nav class="nav">
    <div class="nav-bar">
        <div class="nav-bar-left">
            <span><img src="https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="JueJinLogo"></span>
            <ul>
                <li exact>首页</li>
                <li exact>沸点</li>
                <li>话题</li>
                <li>小册</li>
                <li>活动</li>
            </ul>
        </div>
        <div class="nav-bar-right">
            <input type="text" placeholder="搜索掘金">
            <span>写文章</span><span>|</span>
            <span>登录·注册</span>

        </div>
    </div>
</nav>
<main>
    <header><h1>全部专题</h1></header>
    <div class="context">
        <div th:each="topic:${topics}" class="topic-card">
            <div class="topic-card-left"><img th:src="${topic.description}" alt=""></div>
            <div class="topic-card-right">
                <h3 th:text="${topic.topicName}"></h3>
                <span th:text="${topic.followersCount}"></span>关注<span>·</span>
                <span th:text="${topic.msgCount}"></span>沸点
                <p th:text="${topic.followed}"></p>
            </div>
        </div>
    </div>
</main>

</body>
</html>